<template>
  <view class="home">
      <view class="icons-container">
        <view v-for="(item, index) in iconsData" :key="index" class="icon" @click="goToDetailPage(item.text)">
        <view class="circle-container">
          <view class="circle">{{ item.number }}</view>
          <text class="icon-text">{{ item.text }}</text>
        </view>
        </view>
      </view>
     <view class="additional-row">
            <text class="additional-text">重点人群</text>
            <text class="additional-text">随访未进行</text>
            <text class="additional-text">本日应随访</text>
            <text class="additional-text">本周应随访</text>
            <text class="additional-text">逾期随访</text>
      </view>

      <view class="list-container">
        <scroll-view class="home-list" scroll-y :show-scrollbar="false">
          <view class="home-item" v-for="(homeItem, index) in HomeV" :key="index">
            <view class="home-text">
              <text>{{ homeItem.name }}</text>
            </view>
            <view class="home-text">
              <text @click="goToDetail(homeItem.name, 1)">{{ homeItem.nosign }}</text>
            </view>
            <view class="home-text">
              <text @click="goToDetail(homeItem.name, 2)">{{ homeItem.DshouldSign }}</text>
            </view>
            <view class="home-text">
              <text @click="goToDetail(homeItem.name, 3)">{{ homeItem.WshouldSign }}</text>
            </view>
            <view class="home-text">
              <text @click="goToDetail(homeItem.name, 4)">{{ homeItem.OverSign }}</text>
            </view>
          </view>
        </scroll-view>
      </view>

  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { computed } from 'vue'
import { onLoad, onShow, onTabItemTap } from '@dcloudio/uni-app'
import { http } from '@/utils/http'

const goToDetailPage = (text) => {
  // 根据不同的文本进行不同的跳转
  if (text === '已逾期总数') {
    uni.navigateTo({ url: '/pages/homeDetail/homeDue' });
  }
  else if(text === '即将逾期总数' || text === '将于一周内逾期总数' ){
    uni.navigateTo({ url: '/pages/homeDetail/homeNearly' });
  }
}

const goToDetail = (crowdName, type) => {
  uni.navigateTo({ url: `/pages/homeDetail/ListDetail?crowdName=${encodeURIComponent(crowdName)}&type=${type}`});
}

//头部
const iconsData = ref([]);
const getHome = () => {

  http({
    url:
      '/index/getIndexHeaderData?doctorId=1' ,
    method: 'GET',
  }).then(function(response: any) {
      const responseData = response.data;
      // 将接口返回的数据应用到 iconsData 数组中
      iconsData.value = [
        { number: responseData.todayAddSign, text: '日新增签约数' },
        { number: responseData.totalVisited, text: '已随访总人数' },
        { number: responseData.totalSign, text: '累计签约总数' },
        { number: responseData.nearlyDue, text: '即将逾期总数' },
        { number: responseData.nearlyWeekDue, text: '将于一周内逾期总数' },
        { number: responseData.totalDue, text: '已逾期总数' },
      ];
      //console.log(responseData)
  });

};

//工作提醒

const HomeV = ref([]);

const getHomeList = () => {

  http({
    url:
      '/index/getIndexBodyData?doctorId=1' ,
    method: 'GET',
  }).then(function(response: any) {
       HomeV.value = response.data.map(item => ({
              name: item.crowdName,
              nosign: item.firstVisit,
              DshouldSign: item.todayVisit,
              WshouldSign: item.weekVisit,
              OverSign: item.dueVisit
            }));
      //console.log(responseData)
  });

};

onLoad(() => {
  getHomeList();
  getHome();
})

</script>

<style scoped lang="scss">
.home {
  padding: 10rpx 5rpx 0 5rpx;
  position: relative;
}


.circle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.icons-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

.icon {
  text-align: center;
}

.icon-text {
  font-size: 14px;
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #ccc;
  line-height: 60px;
  font-size: 24px;
  color: #333;
  text-align: center;
}


.additional-row {
  display: flex;
  //justify-content: space-around;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
  padding-left: 115px;
  //padding-right: 60px;

}

.additional-text {
  font-size: 17px;
  margin-right: 70px;
  //margin-left: 2px;
}


  .list-container {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      background-color: #f0f0f0;
      width: 100%;
      height: calc(100vh - 167rpx);
      overflow-y: auto;
      //列表
      .home-list{
        width: 100%;
        .home-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #fefefe;
          position: relative;
          overflow: hidden;
          height: 30rpx;
          padding-left: 70rpx;
          margin-bottom: 4rpx;
        }

        .home-text {
          font-size: 16px;
          flex: 1;
        }

      }
  }

</style>
